﻿<%@ Page Title="" Language="C#" MasterPageFile="~/TracNghiem.Master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="TracNghiemChonTruong.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        var step = 1;

        function Move(step) {
            switch (step) {
                case 1:
                    $("#b1").addClass('inprogress');
                    $("#b2").removeClass('inprogress');
                    $("#b2").addClass('pending');
                    $("#<%=rpt1.ClientID %>").show();
                    $("#<%=rpt2.ClientID %>").hide();
                    $("#<%=rpt3.ClientID %>").hide();
                    $('#btnBack').hide();
                    break;
                case 2:
                    $("#b2").removeClass('pending');
                    $("#b2").removeClass('done');
                    $("#b2").addClass('inprogress');
                    $("#b1").removeClass('inprogress');
                    $("#b1").addClass('done');
                    $("#b3").removeClass('inprogress');
                    $("#b3").addClass('pending');
                    $("#<%=rpt2.ClientID %>").show();
                    $("#<%=rpt1.ClientID %>").hide();
                    $("#<%=rpt3.ClientID %>").hide();
                    $('#btnBack').show();
                    $('#btnNext').show();
                    $('#btnResult').hide();
                    break;
                case 3:
                    $("#b3").addClass('inprogress');
                    $("#b2").removeClass('inprogress');
                    $("#b2").addClass('done');
                    $("#<%=rpt3.ClientID %>").show();
                    $("#<%=rpt2.ClientID %>").hide();
                    $("#<%=rpt1.ClientID %>").hide();
                    $('#btnNext').hide();
                    $('#btnResult').show();
                    break;
            default:
            }
        }

        $(document).ready(function () {

            $("#btnBack").hide();
            $('#btnResult').hide();
            $("#<%=rpt2.ClientID %>").hide();
            $("#<%=rpt3.ClientID %>").hide();

            $("#step1 input").keypress(function (e) {
                // Check if the value of the input is valid
                var key = e.keyCode || e.charCode;
                if ((key >= 48 && key <= 50) || key == 8 || key == 46 || (key >= 37 && key <= 40)) {
                    var maxvalue = 2;
                    var minvalue = 0;
                    var value = $(this).val() * 10 + (key - 48);
                    if ((value <= maxvalue && value >= minvalue) || key == 8 || key == 46 || (key >= 37 && key <= 40)) {
                    } else e.preventDefault(e);
                }
                else e.preventDefault(e);
            });

            $("#btnBack").click(function() {
                Move(--step);
            });

            $("#btnNext").click(function () {
                Move(++step);
            });

            $("#btnResult").click(function () {

                var mark_r = 0, mark_c = 0, mark_e = 0, mark_i = 0, mark_a = 0, mark_s = 0;
                $(".r").each(function (index) {
                    var tmp = parseInt($(this).val());
                    if (!isNaN(tmp)) {
                        mark_r = mark_r + tmp;
                    }
                });
                $(".c").each(function (index) {
                    var tmp = parseInt($(this).val());
                    if (!isNaN(tmp)) {
                        mark_c = mark_c + tmp;
                    }
                });

                $(".e").each(function (index) {
                    var tmp = parseInt($(this).val());
                    if (!isNaN(tmp)) {
                        mark_e = mark_e + tmp;
                    }
                });
                $(".i").each(function (index) {
                    var tmp = parseInt($(this).val());
                    if (!isNaN(tmp)) {
                        mark_i = mark_i + tmp;
                    }
                });
                $(".a").each(function (index) {
                    var tmp = parseInt($(this).val());
                    if (!isNaN(tmp)) {
                        mark_a = mark_a + tmp;
                    }
                });
                $(".s").each(function (index) {
                    var tmp = parseInt($(this).val());
                    if (!isNaN(tmp)) {
                        mark_s = mark_s + tmp;
                    }
                });
                $("#marks_r").text(mark_r);
                $("#marks_c").text(mark_c);
                $("#marks_e").text(mark_e);
                $("#marks_i").text(mark_i);
                $("#marks_a").text(mark_a);
                $("#marks_s").text(mark_s);
                //r, c, e, i, a, s

                if (step == 3) {
                    $.ajax({
                        type: "POST",
                        url: "/Default.aspx/GoToStep2",
                        data: "{ markR: " + mark_r + ", markC: " + mark_c + ", markE: " + mark_e + ", markI: " + mark_i + ", markA: " + mark_a + ", markS: " + mark_s + " }",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            // Do something interesting here.
                            window.location = "/ResultPage.aspx";
                        }
                    });
                }
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentHeader" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentBody" runat="server">
    <div id="step1">
        <div class="float-left">
            <p class="group">
                Bạn hãy nghĩ về thói quen, công việc tương lai và hoạt động trong trường lớp của
                bạn để trả lời các câu hỏi sau:</p>
            <p class="mark">
                Cho <span>2 điểm</span> nếu rất đúng, <span>1 điểm</span> nếu đúng, <span>0 điểm</span>
                nếu hoàn toàn không đúng</p>
        </div>
        <div class="float-right">
            <img src="/Images/FunnyFace.png" alt="trac nghiem nganh nghe" />
        </div>
        <div class="clear">
        </div>
        <div id="border">
            <div style="margin: auto">
                <div class="float-left inprogress" id="b1">
                    BƯỚC 1</div>
                <div class="float-left pending" id="b2">
                    BƯỚC 2</div>
                <div class="float-left pending" id="b3">
                    BƯỚC 3</div>
            </div>
            <div class="clear">
            </div>
            <asp:DataList ID="rpt1" runat="server" RepeatColumns="2" RepeatLayout="Table" CellSpacing="5">
                <HeaderTemplate>
                    <div>
                        <b>Bạn thích làm nghề gì?</b>
                    </div>
                </HeaderTemplate>
                <ItemTemplate>
                    <div class="title">
                        <%#Eval("Content") %>
                    </div>
                    <div class="content">
                        <input type="text" id="1_<%#Container.ItemIndex %>" class="<%#Eval("Group") %>" />
                    </div>
                </ItemTemplate>
                <FooterTemplate>
                </FooterTemplate>
            </asp:DataList>
            <asp:DataList ID="rpt2" runat="server" RepeatColumns="2" RepeatLayout="Table" CellSpacing="5">
                <HeaderTemplate>
                    <div>
                        <b>Bạn thường làm gì vào thời gian rãnh?</b>
                    </div>
                </HeaderTemplate>
                <ItemTemplate>
                    <div class="title">
                        <%#Eval("Content") %>
                    </div>
                    <div class="content">
                        <input type="text" id="2_<%#Container.ItemIndex %>" class="<%#Eval("Group") %>" />
                        <%--onkeypress="if (event.keyCode < 44 || event.keyCode > 57 || event.keyCode==45 || event.keyCode==47) event.returnValue = false;"--%>
                    </div>
                </ItemTemplate>
                <FooterTemplate>
                </FooterTemplate>
            </asp:DataList>
            <asp:DataList ID="rpt3" runat="server" CellSpacing="5">
                <HeaderTemplate>
                    <div>
                        <b>Tính cách của bạn như thế nào?</b>
                    </div>
                </HeaderTemplate>
                <ItemTemplate>
                    <div class="longTitle">
                        <%#Eval("Content") %>
                    </div>
                    <div class="content">
                        <input type="text" id="3_<%#Container.ItemIndex %>" class="<%#Eval("Group") %>" />
                    </div>
                </ItemTemplate>
                <FooterTemplate>
                </FooterTemplate>
            </asp:DataList>
        </div>
        <%--<asp:Button ID="btnResult" runat="server" Text="Kết quả" />--%>
        <div class="line">
            <div class="float-right">
                <input type="button" value="Kết Quả" id="btnResult" /></div>
            <div class="float-right">
                <input type="button" value="Tiếp tục" id="btnNext" /></div>
            <div class="float-right">
                <input type="button" value="Trở về" id="btnBack" /></div>
        </div>
        <%--<p class="back-top">
            <a href="#top"><span></span></a>
        </p>
        <p class="go-bottom">
            <a href="#bottom"><span></span></a>
        </p>--%>
    </div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentFooter" runat="server">
</asp:Content>
